<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入类库  v2.7.13-->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		
		<!--   3.6.5    不要用4.x  Vue.components("router-link") -->
		<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>

		<style>  
		
		</style>
	</head>
	<body>

		<div id="app">
			<!-- router-link 是一个全局组件  -->
			 <router-link to="/login">登录</router-link>
			 <router-link to="/home">首页</router-link>
			
			<!-- 
				此处跟局超链接的url 动态切换内容 
			 -->
			 
			<div style="border:solid 1px black ;height: 300px;width:800px" >
				
				 <router-view></router-view>
				
			</div>
			
			
		</div>
		
		<template id="home" >
			<div>
				
				<div style="display: inline-block;height: 300px;width:200px;vertical-align: top;" >
						<!-- <router-link to="/login">登录</router-link>
						<router-link to="/home">首页</router-link> -->
					<ul >
						<li> <a href="#/home/hotcompany" >热门厂商</a></li>
						<li> <a href="#/home/product" >产品管理</a></li>
					</ul>	
						
						
				</div>
				
				<div style="display: inline-block;height: 300px;width:590px;border-left:solid 1px grey" >
						<router-view></router-view>
				</div>
				
				
				
			</div>
			
			
		</template>
		
		
		
		<script>
		
		
			// 定义 url  和 动态组件的  映射
			let Home = {
				template:'#home'
			}
			
			let Login = {
				template:'<div  >  登录的信息</div> '
			}
			
			
			
			let HotCompany = {
				template:'<div>热门厂商</div>'
			}
			
			let Product = {
				template:'<div  >  产品管理</div> '
			}
			
			//路由
			let router = new VueRouter({
				  routes: [
					  {
						path: '/home',
						component: Home,
						children:[
							{
								path: '/home/hotcompany',
								component: HotCompany,
							},
							{
								path: '/home/product',
								component: Product,
							}
						]
					}, {
						path: '/login',
						component: Login
					}
				]
				
			})
			
			
		
			
			//只有跟 Vue对象的date 声明时 JSON对象
			let vm = new Vue({
				el: '#app',
				
				data: {
					show:true
				},
				// 管理路由
				// router:router,
				router,
				//上面的省略的写法
				components:{
					
				}
				
				

			});
		</script>

	</body>
</html>
